// 项目详情

<template>
    <f7-page class="detail">
        <f7-navbar>
            <f7-nav-left>
                <f7-link back
                         icon-material="arrow_back"></f7-link>
            </f7-nav-left>
            <f7-nav-title>项目信息</f7-nav-title>
            <f7-nav-right></f7-nav-right>
        </f7-navbar>

        <van-notice-bar background="#fff"
                        color="#345">
            <f7-icon solt="left-icon"
                     color="#3385ff"
                     f7="layers_alt_fill"></f7-icon>
            <span>{{models.model.engineeName}}</span>
        </van-notice-bar>

        <v-accordion title="基本信息"
                     disabled>
            <ul class="jbxx">
                <li>
                    <label>建设单位</label>
                    <span>{{jbxxOrg.js.join(',')}}</span>
                </li>
                <li>
                    <label>施工单位</label>
                    <span>{{jbxxOrg.sg.join(',')}}</span>
                </li>
                <li>
                    <label>监理单位</label>
                    <span>{{jbxxOrg.jl.join(',')}}</span>
                </li>
                <li>
                    <label>项目状态</label>
                    <span>安全：{{models.model.safeOpenStatusName}}；质量：{{models.model.qualityOpenStatusName}}</span>
                </li>
                <li>
                    <label>形象进度</label>
                    <span>{{models.model.progressName}}</span>
                </li>
                <li>
                    <label>建设规模</label>
                    <span>{{models.model.constructionScale}}{{models.model.scaleUnit}}</span>
                </li>
                <li>
                    <label>合同价格</label>
                    <span>{{models.model.contractPrice}}万元</span>
                </li>
                <li>
                    <label>开工日期</label>
                    <span>{{models.model.planOpenDate}}</span>
                </li>
                <li>
                    <label>合同工期</label>
                    <span>{{models.model.contractDuration}}天</span>
                </li>
            </ul>
        </v-accordion>

        <v-accordion title="责任主体"
                     disabled>
            <ul class="zrzt"
                v-if="zrzt.length > 0">
                <template v-for="(item, index) in zrzt">
                    <template v-for="(org, orgIndex) in item.data">
                        <li :key="`${index}-org-${orgIndex}`">
                            <span :class="fnZrztClass(item.typeCode)">{{org.orgTypeName}}</span>
                            <div>
                                <p>{{org.orgName}}</p>
                                <template v-for="(per, perIndex) in org.engineePerson">
                                    <div :key="`${index}-org-${orgIndex}-pr-${perIndex}`">
                                        <section>
                                            <label>{{per.personTypeName}}：</label>
                                            <span>{{per.personName}}</span>
                                        </section>
                                        <section @click="fnDial(per.personMobile)">
                                            <label>
                                                <f7-icon f7="phone_fill"></f7-icon>
                                            </label>
                                            <span>{{per.personMobile}}</span>
                                        </section>
                                    </div>
                                </template>
                            </div>
                        </li>
                    </template>
                </template>
            </ul>

            <van-empty v-else
                       description="暂无数据" />
        </v-accordion>

        <!-- <v-accordion title="监督机构">
            <ul class="jdjg">
                <li>
                    <span class="blue">
                        <span>安全</span>
                        <span>监督机构</span>
                    </span>
                    <div>
                        <p>广州市海珠区建设项目质量安全监督站</p>
                        <div>
                            <section>
                                <label>东配套<f7-icon f7="phone_fill"></f7-icon></label>
                                <span></span>
                            </section>
                            <section>
                                <label>徐娟<f7-icon f7="phone_fill"></f7-icon></label>
                                <span></span>
                            </section>
                        </div>
                    </div>
                </li>
                <li>
                    <span class="blue">
                        <span>质量</span>
                        <span>监督机构</span>
                    </span>
                    <div>
                        <p>广州市海珠区建设项目质量安全监督站</p>
                        <div>
                            <section>
                                <label>东配套<f7-icon f7="phone_fill"></f7-icon></label>
                            </section>
                            <section>
                                <label>徐娟<f7-icon f7="phone_fill"></f7-icon></label>
                            </section>
                        </div>
                    </div>
                </li>
            </ul>
        </v-accordion> -->

        <!-- <f7-toolbar position="bottom"
                    no-shadow
                    class="fff">
            <f7-button fill
                       class="edit-btn">修改</f7-button>
        </f7-toolbar> -->
    </f7-page>
</template>

<script>
import controller from "@/libs/framework/controller"

export default class instance extends controller {
    onBeforeInit () {
        this.urls = {
            model: '/project/enginee/getEntity'
        }
    }
    mixin () {
        return {
            data () {
                return {
                    models: {
                        // 项目信息
                        model: {},
                        // 项目主体单位
                        engineeOrgs: [],
                        // 责任人员
                        engineePerson: []
                    },
                    controlData: {
                        // 单位类型数据源
                        orgTypeOps: [],
                        // 项目类型数据源
                        engineeTypeOps: [],
                        // 形象进度数据源
                        progressOps: [],
                        // 人员类型数据源
                        personTypeOps: []
                    }
                }
            },
            computed: {
                // 基本信息的单位
                jbxxOrg () {
                    let org = {
                        js: [],
                        sg: [],
                        jl: []
                    }

                    this.models.engineeOrgs.map(item => {
                        // 建设
                        if (item.isMain == 1 && item.orgTypeCode == 'BUILD') {
                            org.js.push(item.orgName)
                        }

                        // 施工
                        if (item.isMain == 1 && item.orgTypeCode == 'CONSTRUCTION') {
                            org.sg.push(item.orgName)
                        }

                        // 监理
                        if (item.isMain == 1 && item.orgTypeCode == 'SUPERVISOR') {
                            org.jl.push(item.orgName)
                        }
                    })

                    return org
                },
                // 责任主体
                zrzt () {
                    let arr = []

                    // 将同一种类型的单位放一起（后端不给排）
                    this.controlData.orgTypeOps.map(type => {
                        let obj = {
                            typeCode: type.code,
                            data: []
                        }

                        this.models.engineeOrgs.map(org => {
                            if (type.code == org.orgTypeCode) {
                                org.engineePerson = []
                                if (type.code != "DESIGN") {
                                    obj.data.push(org)
                                }

                            }
                        })

                        arr.push(obj)
                    })

                    // 将责任人加入到单位中（后端返回的是单位一个array，责任人一个array，需要根据bodyId关联）
                    let newArr = arr.filter(item => {
                        if (item.data.length > 0) {
                            item.data.map(org => {
                                this.models.engineePerson.map(per => {
                                    if (org.bodyId == per.bodyId) {
                                        org.engineePerson.push(per)
                                    }
                                })
                            })

                            return item
                        }
                    })

                    return newArr
                }
            },
            methods: {
                // 责任主体的class
                fnZrztClass (code) {
                    if (code == 'BUILD' || code == 'DESIGN') {
                        return 'blue'
                    } else if (code == 'CONSTRUCTION' || code == 'SUPERVISOR') {
                        return 'cyan'
                    } else if (code == 'SURVEY') {
                        return 'green'
                    } else {
                        return 'blue'
                    }
                },
                // 拨打电话
                fnDial (mobile) {
                    if (mobile && window.plus) {
                        window.plus.device.dial(mobile)
                    }
                }
            }
        }
    }
}
</script>

<style lang="less" scoped>
.detail {
    .jbxx {
        padding: 10px 0;

        li {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 10px 10px 10px 15px;

            > label {
                color: #888;
                width: 66px;
            }

            > span {
                color: #444;
                text-align: right;
            }

            > div {
                width: 48%;
                display: flex;
                justify-content: space-between;

                > label {
                    color: #888;
                    width: 38%;
                }

                > span {
                    color: #444;
                    text-align: right;
                }
            }
        }
    }

    .zrzt {
        padding: 10px;

        li {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 10px 0;

            > span {
                width: 40px;
                flex-shrink: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                writing-mode: vertical-rl;
                letter-spacing: 4px;
                padding: 10px 0;
                border-radius: 2px;
            }

            > div {
                flex: 1;
                padding-left: 12px;
                background: linear-gradient(
                    270deg,
                    #ffffff 0%,
                    rgba(228, 239, 255, 0.36) 100%
                );

                > div {
                    display: flex;

                    section {
                        display: flex;
                        align-items: center;

                        > label {
                            color: #888;

                            .f7-icons {
                                font-size: 16px;
                                margin-right: 4px;
                                color: #3385ff;
                            }
                        }

                        > span {
                            color: #444;
                            flex-shrink: 0;
                        }

                        &:nth-of-type(1) {
                            flex: 1;
                        }
                        &:nth-of-type(2) {
                            width: 110px;
                        }
                    }
                }
            }
        }
    }

    .jdjg {
        padding: 10px;

        li {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            padding: 10px 0;

            > span {
                padding: 20px 10px;
                flex-shrink: 0;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                line-height: 1.2;
                border-radius: 4px;
            }

            > div {
                flex: 1;
                padding-left: 12px;

                > div {
                    display: flex;

                    section {
                        flex: 1;
                        display: flex;
                        align-items: center;

                        > label {
                            color: #888;

                            .f7-icons {
                                font-size: 16px;
                                margin: 0 4px;
                            }
                        }

                        > span {
                            color: #444;
                        }
                    }
                }
            }
        }
    }

    .edit-btn {
        flex: 1;
        margin: 0 10px;
    }

    span {
        &.blue {
            background-color: #eaeffb;
            color: #3385ff;
        }

        &.cyan {
            background-color: #e8f3fb;
            color: #48c0fb;
        }

        &.green {
            background-color: #e8f5f5;
            color: #36d5b3;
        }
    }

    .accordion-list {
        margin-top: 10px;
    }
}
</style>
